<template>
  <div class="error">
    <div class="apptitle"><!-- 查验结果 --></div>
    
    <div class="ico-error flex">
      <van-icon name="cross" size=".5rem" color="#f26a66" />
    </div>
    <div class="tishi1">查验失败</div>
    <p class="tishi2">失败原因 : {{ errMsg }}</p>

    <div class="btn-select flex flex-jus-between">
      <div @click="toLink('/selectclassic')" class="auto">
        <van-icon name="scan" size=".34rem" color="#688cf1" style="margin-right: 0.05rem;" />
        扫描录入
      </div>
      <div @click="toLink('/manualinput')" class="noauto">
        <van-icon name="feedback" size=".34rem" color="#7051ec" style="margin-right: 0.05rem;" />
        手动输入
      </div>
    </div>
  </div>
</template>

<script>
import { mapMutations } from 'vuex';

export default {
  name: 'ErrorView',
  data(){
    return {
      errMsg:""
    }
  },
  components: {},
  methods:{
    ...mapMutations(['setFullLoading']),
    // 跳转链接
    toLink(url,params={}){
      this.$router.push({ path: url, query: params });
    },
  },
  mounted(){
    this.$store.commit('setFullLoading',false)
    // 接收失败原因
    this.errMsg = this.$route.query.errMsg 
  },
  //设置title的钩子
  beforeRouteEnter(to, from, next) {
    document.title = to.meta.title || 'Default Title';
    next();
  },
  beforeRouteUpdate(to, from, next) {
    document.title = to.meta.title || 'Default Title';
    next();
  },
}
</script>

<style scoped>
  .ico-error {
    width:3rem;
    height:3rem;
    background-color: #FCE8E9;
    border-radius: 1000rem;
    margin:.8rem auto 0;
  }
  .tishi1 {
    font-size: 0.34rem;
    padding:0.3rem 0;
    text-align: center;
  }
  .tishi2 {
    text-align: center;
    font-size: 0.28rem;
    color:#666;
    letter-spacing: 0.01rem;
  }
  .btn-select {
    margin:1rem auto 0;
    padding:0 1rem;
  }
  .btn-select div {
    display: block;
    font-size: .34rem;
    border-radius: 100rem;
    padding:0.2rem 0.35rem;
    user-select: none;
    line-height: 1;
  }
  .btn-select div.auto {
    color:#688CF1;
    background-color: #E6EEFB;
  }
  .btn-select div.noauto {
    color:#7051EC;
    background-color: #EAE5FB;
  }
</style>